<script setup>
import CoachFilter from "@/coachfinder/components/coaches/CoachFilter.vue";
import CoachItem from "@/coachfinder/components/coaches/CoachItem.vue";
import BaseButton from "@/coachfinder/components/ui/BaseButton.vue";
import BaseSpinner from "@/coachfinder/components/ui/BaseSpinner.vue";
import store from "@/coachfinder/store";
import BaseCard from "@/components/ui/BaseCard.vue";
import { computed, ref, onMounted } from "vue";

const isLoading = ref(false);

const hasError = computed(() => {
  return store.getters.hasError;
});
const error = computed(() => {
  return store.getters.getError;
});

const coaches = computed(() => {
  return store.getters.coaches;
});

const hasCoaches = computed(() => {
  return !isLoading.value && store.getters.hasCoaches;
});

const isCoach = computed(() => {
  return store.getters.isCoach;
});

const isLoggedIn = computed(() => {
  return store.getters.isAuthenticated;
});

const setFilters = function (updatedFilters) {
  coaches.value = coaches.value.filter((coach) => {
    if (updatedFilters.frontend && coach.areas.includes("frontend")) {
      return true;
    }
    if (updatedFilters.backend && coach.areas.includes("backend")) {
      return true;
    }
    if (updatedFilters.career && coach.areas.includes("career")) {
      return true;
    }
    return false;
  });
};

const fetchCoaches = async function (refresh = false) {
  isLoading.value = true;
  await store.dispatch("loadCoaches", { foreceRefresh: refresh });
  isLoading.value = false;
};
onMounted(() => {
  fetchCoaches();
});
</script>

<template>
  <div>
    <section>
      <CoachFilter @change-filter="setFilters"></CoachFilter>
    </section>
    <section>
      <div v-if="hasError">{{ error }}</div>
      <BaseCard v-else>
        <div class="controls">
          <!-- <button>Refresh</button>
        <router-link to="/register">Register as Coach</router-link> -->
          <BaseButton mode="outline" @click="fetchCoaches(true)"
            >Refresh</BaseButton
          >
          <BaseButton link to="/auth?redirect=register" v-if="!isLoggedIn">Login</BaseButton>
          <BaseButton
            link
            to="/register"
            v-if="isLoggedIn && !isCoach && !isLoading"
            >Register as Coach</BaseButton
          >
        </div>
        <div v-if="isLoading">
          <BaseSpinner></BaseSpinner>
        </div>
        <ul v-else-if="hasCoaches">
          <!-- <li v-for="coach in filteredCoaches" :key="coach.id">
        {{ coach.firstName }}
      </li> -->
          <CoachItem
            v-for="coach in coaches"
            :key="coach.id"
            :id="coach.id"
            :first-name="coach.firstName"
            :last-name="coach.lastName"
            :rate="coach.hourlyRate"
            :areas="coach.areas"
          ></CoachItem>
        </ul>
        <h3 v-else>No Coaches found.</h3>
      </BaseCard>
    </section>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.controls {
  display: flex;
  justify-content: space-between;
}
</style>
